.fatal_error_overlay
{
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 50001;
 width: 100%;
 height: 100%;
 background-color: black;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.fatal_error_message
{
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 50002;
 width: 100%;
 height: 100%;
 background-color: transparent;
 color: white;
 font-weight:bold;
 text-align:center;
 font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.transparent_message
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height:50px;
padding-top:20px;
background-color:rgba(0,0,0,0.8) !important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The top Toolbar and the buttons (Save, Undo, Redo,...) inside
 * 
 */
#toolbar
{
left:0px;
top:0px;
height:35px;
background: transparent url(./images/bg_map_toolbar.gif) top left repeat-x;
border: none;
border-bottom: 1px solid #1259a4;
font-size: smaller;
width: 100%;
padding:0px;
margin:0px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.toolbar_button_group {
float:left;
margin:3px 0 0 15px;
padding:0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.toolbar_button {
background:url("./images/bg_toolbar_button.gif") no-repeat scroll 0 0 transparent;
float:left;
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

a.toolbar_button {
color:white;
cursor:pointer;
height:27px;
line-height:27px;
margin:0;
padding:0 10px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

a.toolbar_button_disabled {
color:#4A95CC !important;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.first_button {
background-position:0 0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.first_button:hover {
background-position:0 -27px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.center_button {
background-position:-20px 0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.center_button:hover {
background-position:-20px -27px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.last_button {
background-position:100% 0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

li.last_button:hover {
background-position:100% -27px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


/* The Header of each panel (e.g. left hand side object and property panel)
 * 
 */
.panel_header
{
border-bottom:1px solid #76797C;
background:-moz-linear-gradient(20% 26% 270deg,#F2F3F4, #EDEEF1);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F3F4), to(#EDEEF1));
background-color:#F2F3F4;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#EDEEF1', startColorstr='#F2F3F4', gradientType='0');
color:#565656;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
width:240px;
font-weight:bold;
font-size:12px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The object palette on the left hand side. The panel which contains the Server, Storage and
 * Switch object to drop inside the canvas.
 * 
 */
#object_panel
{
border:1px solid #e0e0e0;
background:-moz-linear-gradient(20% 26% 270deg,#F2F3F4, #EDEEF1);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F3F4), to(#EDEEF1));
background-color:#F2F3F4;
color:#a0a0a0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The "Server" element in the left hand side object palette
 * 
 */
.palette_part_server
{
width:80px !important;
height:25px;
text-align:center;
border: 1px solid #464646;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #141414;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#464646), to(#141414));
background: -moz-linear-gradient(#464646, #141414);
background: linear-gradient(#464646, #141414);
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#141414', startColorstr='#464646', gradientType='0');
margin:0px;
padding:3px;
padding-left:10px;
padding-right:10px;
color:white;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The "Storage" element in the left hand side object palette
 * 
 */
.palette_part_storage
{
width:80px !important;
height:25px;
text-align:center;
border: 1px solid #95CFDF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #3CA1C2;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#95CFDF), to(#3CA1C2));
background: -moz-linear-gradient(#95CFDF, #3CA1C2);
background: linear-gradient(#95CFDF, #3CA1C2);
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#3CA1C2', startColorstr='#95CFDF', gradientType='0');
margin:0px;
padding:3px;
padding-left:10px;
padding-right:10px;
color:white;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The "Switch" element in the left hand side object palette
 * 
 */
.palette_part_switch
{
width:80px !important;
height:25px;
text-align:center;
border: 1px solid #E2E1DF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #E2E1DF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FDFDFD), to(#E2E1DF));
background: -moz-linear-gradient(#FDFDFD, #E2E1DF);
background: linear-gradient(#FDFDFD, #E2E1DF);
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#E2E1DF', startColorstr='#FDFDFD', gradientType='0');
padding:3px;
padding-left:10px;
padding-right:10px;
color:#2B2B2B;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The root container of the property pages 
 * 
 */
#property_panel
{
border:1px solid #e0e0e0;
background:-moz-linear-gradient(20% 26% 270deg,#F2F3F4, #EDEEF1);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F3F4), to(#EDEEF1));
background-color:#F2F3F4;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#EDEEF1', startColorstr='#F2F3F4', gradientType='0');
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


/* The label of each property inside the property panel
 *
 */
.property_panel_label
{
color:gray;
white-space:nowrap;
font-size:8pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

/* The label of each property inside the property panel
 *
 */
.property_panel_data
{
color:black;
white-space:nowrap;
font-size:8pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_header
{
color:gray;
font-weight:bold;
white-space:nowrap;
font-size:12px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_container
{
background-color:#F0F0F0;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_name
{
color:gray;
font-weight:bold;
white-space:nowrap;
font-size:9pt;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_remove
{
cursor:pointer;
background:url("./images/delete_image.png") no-repeat transparent;
width:16px;
height:16px;
position:absolute;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_add
{
cursor:pointer;
background:url("./images/add_image.png") no-repeat transparent;
width:16px;
height:16px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.property_panel_image_separator
{
border-bottom:1px solid gray;
}

/* The main canvas/network paint area
 * 
 */
#paintarea
{
background-color:#FEFFFE
}

/* Elementes in the Canvas. The Server, Storage and Switch
 * Additional each element of the network node can be branded via CSS
 * - header
 * - data
 * - label
 * - the main outer frame
 */
.server_frame
{
border: 1px solid #464646;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #141414;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#464646), to(#141414));
background: -moz-linear-gradient(#464646, #141414);
background: linear-gradient(#464646, #141414);
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.server_label
{
color:white;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.server_data
{
color:white;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-weight:bold;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


.server_header
{
color:white;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
height:20px;
padding:5px;
padding-bottom:10px;
padding-top:8px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


.storage_frame
{
border: 1px solid #95CFDF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #3CA1C2;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#95CFDF), to(#3CA1C2));
background: -moz-linear-gradient(#95CFDF, #3CA1C2);
background: linear-gradient(#95CFDF, #3CA1C2);
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.storage_label
{
color:white;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.storage_data
{
color:white;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-weight:bold;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


.storage_header
{
color:white;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
height:20px;
padding:5px;
padding-bottom:10px;
padding-top:8px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}



.switch_frame
{
border: 1px solid #E2E1DF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #E2E1DF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FDFDFD), to(#E2E1DF));
background: -moz-linear-gradient(#FDFDFD, #E2E1DF);
background: linear-gradient(#FDFDFD, #E2E1DF);
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.switch_label
{
color:#2B2B2B;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.switch_data
{
color:#2B2B2B;
white-space:nowrap;
font-size:8pt;
padding:5px;
font-weight:bold;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


.switch_header
{
color:#2B2B2B;
font-weight:bold;
white-space:nowrap;
font-size:10pt;
height:20px;
padding:5px;
padding-bottom:10px;
padding-top:8px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}




.draw2d_window
{
z-index:60000;
-moz-box-shadow: 8px  8px 18px #ddd;
-webkit-box-shadow: 8px 8px 18px #ddd;
box-shadow: 8px 8px 18px #ddd;
background-color:white;
background-color:rgba(255,255,255, 0.7);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:10px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.draw2d_window_middle
{
background:-moz-linear-gradient(0% 86% 90deg,#000000, #363636);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#363636), to(#000000));
background-color:#121212;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border:1px solid gray;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.draw2d_window_content
{
padding:10px;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

.draw2d_window_message
{
color:white;
font-size:14px;
font-weight:bold;
font-family:inherit;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}


.gallery_li
{
border: 1px solid #2A2A2A;
background-color: white;
margin: 0.1em;
padding: 0.1em;
width: 100px;
height:100px;
overflow:hidden;
display: inline-block;
vertical-align: top;
text-align:center;
float:left;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
} 

.gallery_li_img
{
width: 100px;
height:auto;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
} 

.gallery_li_selected
{
background-color: #80F080 !important;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}